<template>
  <div v-show="code === 200 ">
    <div id="monthlytopsortbar"  v-if="countView"   :style="{width: '1000px', height: '600px'}" v-model="webname" ></div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "MonthlyTopSortBar",
  props:['webname'],
  data(){
    return{
      api:'',
      countView:true,
      code: 200,
    }
  },
  computed:{
    ...mapState(['date','time']),
    //同时监听两个数据
    listenChange () {
      const _this = this
      const date = _this.date
      const time =_this.time
      return {date,time}
    }
  },
  methods: {
    getDailyTopData() {
      const _this = this
      var datevalue
      if (_this.date===null){
        var date = new Date()
        var year = date.getFullYear()
        var month = date.getMonth() + 1 < 10 ?
            '0' + (date.getMonth() + 1) : date.getMonth()+ 1
        // var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        // var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        // var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        // var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        datevalue = year + '-' +month
      } else {
        var datearr=_this.date.split('-')
        datevalue = datearr[0] + '-' + datearr[1]
      }

      switch (this.webname) {
        case '腾讯新闻' :
          _this.api = this.$base_url+'monthlytop/txhot/'+datevalue;
          break;
        case '今日头条' :
          _this.api = this.$base_url+'monthlytop/jrhot/'+datevalue;
          break;
        case '百度热搜' :
          _this.api = this.$base_url+'monthlytop/bdhot/'+datevalue;
          break;
        case '微博热搜' :
          _this.api = this.$base_url+'monthlytop/wbhot/'+datevalue;
          break;
        default :
          _this.api = this.$base_url+'monthlytop/wbhot/'+datevalue;
          break;
      }
      return _this.api;
    },
    setSortBar(){
      let _this = this
      axios.get(this.getDailyTopData()).then(function (response) {
        if (response.data.code===400){
          _this.code=response.data.code
        } else {
          _this.code=response.data.code
        // console.log(response.data.data)
        let source = []
        for (let i=0;i<response.data.data.length;i++){
          source.push([response.data.data[i].name,response.data.data[i].value])
        }
        // 基于准备好的dom，初始化echarts实例
        let myChart = _this.$echarts.init(document.getElementById('monthlytopsortbar'))
        // 绘制图表
        myChart.setOption({
          backgroundColor:'#FFFFFF',//背景颜色白色
          title: {
            text: '当月热度TOP10',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#555555',
            },
            subtext: '每天零点更新',
            subtextStyle: {
              fontSize: 10,
            },
          },
          tooltip : {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            left: '10%',
            bottom:'35%'
          },
          dataset: [
            {
              dimensions: ['topic', 'hot'],
              source: source
            },
            {
              transform: {
                type: 'sort',
                config: { dimension: 'hot', order: 'desc' }
              }
            }
          ],
          xAxis: {
            type: 'category',
            axisLabel: {
              interval:0,
              rotate:-0,
              fontSize: 10,
              formatter:function(val){
                return val.split("").join("\n");
              }
            }
          },
          yAxis: {},
          series: {
            type: 'bar',
            encode: { x: 'name', y: 'score' },
            datasetIndex: 1
          }
        })
        }
      })
    }
  },
  mounted() {
    if (this.$route.name =='Chart'){
      this.setSortBar()
    }
  },
  watch:{
    webname(val) {
      if (this.$route.name =='Chart'){
        this.setSortBar()
      }
    },
    listenChange(val){
      if (this.$route.name ==='Chart'){
        const _this = this
        _this.setSortBar()
        //获取数据重新刷新页面
        _this.countView=false
        _this.$nextTick(()=>{
          _this.countView=true
        })
      }
    },
  }
}
</script>

<style scoped>
#monthlytopsortbar{
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>